<template>
  <div class="app-container ">
    <div class="historybox bg">
      <div>
        <a-table
          :columns="columns"
          :data-source="WebSoloAlarmList"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
          @change="handleTableChange"
          :pagination="pagination"
        >
          <span
            slot="alarmNum"
            slot-scope="text, record"
            :style="{
              'background-color': colorList[record.alarmtype - 1],
              color: '#fff',
              padding: '0 4px',
            }"
            >{{ text }}</span
          >
          <!--          <span slot="address5" slot-scope="text, record"  @click="toProcess(record)"><a-icon type="ellipsis"  style="color:#289EF6;font-size:30px;font-weight: bold "/></span>-->
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
//
import api from "@/api/apiServer";
import { columns, colorList } from "../tabConfigs";

export default {
  props: {},
  data() {
    return {
      columns,
      form: { num: 1 },
      colorList: colorList,
      Alarmparams: {
        macsn: "",
      },
      pagination: {
        current: 1,
        pageSize: 5,
        showQuickJumper: false,
        showSizeChanger: false,
        showTotal: (total) => `共 ${total} 条`,
        total: 0,
      },
      WebSoloAlarmList: [],
      total: 0,
    };
  },
  mounted() {
    this.AlarmSelectAndPage();
  },
  computed: {
    macSn() {
      return this.$route.query.macSn;
    },
  },
  methods: {
    //查询机床报警信息并分页
    async AlarmSelectAndPage() {
      this.$set(this.Alarmparams, "macsn", this.macSn);
      this.$set(this.Alarmparams, "pageNumber", this.pagination.current);
      this.$set(this.Alarmparams, "pageSize", this.pagination.pageSize);
      const { data: res } = await api.AlarmSelectAndPage(this.Alarmparams);
      this.WebSoloAlarmList = res.content;
      this.pagination.total = res.total;
    },
    // 分页、排序、筛选变化时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination;
      this.AlarmSelectAndPage();
    },
  },
};
</script>
<style scoped lang="less">
@import "../../index.less";
/deep/ .ant-table {
  height: 326px !important;
}
</style>
